<template>
  <div style="margin-left: 14%">
    <!-- 角色权限页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>角色权限
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item class="roleInput" label="角色名称">
              <el-input v-model.trim="formInline.role_name" placeholder="请输入角色名称" clearable  size="small"></el-input>
            </el-form-item>
            <el-form-item class="search" label="">
              <el-button @click="searchRoleName" style="float: right;" size="small" type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div slot="header" class="clearfix">
          <el-row align="middle" type="flex"> 
            <div style="margin-right:10px;width: 60px;">
              <span style="align:center" >角色名称</span>
            </div>
            <el-col :span="4">
              <el-row>
                <el-input placeholder="请输入角色名称" clearable v-model.trim="formInline.role_name"  size="small"></el-input>
              </el-row>
            </el-col>
            <el-col :span="18" >
            </el-col>
              <el-button type="primary" @click="searchRoleName"  size="small">查询</el-button>
          </el-row>
        </div> -->
        <div style="height:40px">
          <el-row>
        <el-button class="global_add" @click="addRole" :disabled="btnList.add" style="float:right; margin-right: 15px;margin-bottom: 5px;" type="text">+&nbsp;新增角色</el-button>
          </el-row>
        </div>
        <el-table stripe :data="roleInfoList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
          <el-table-column align="center" prop="role_name" label="角色名称">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button class="global_edit" v-if="scope.row.role_id === 1" type="text" size="small" disabled>编辑</el-button> 
              <el-button class="global_delete" v-if="scope.row.role_id === 1" type="text" style="color: red" size="small" disabled>删除</el-button>
              <el-button class="global_edit" v-if="scope.row.role_id !== 1" @click="editRole(scope.row)" type="text" size="small" :disabled="btnList.edit">编辑</el-button>
              <el-button class="global_delete" v-if="scope.row.role_id !== 1" @click="sureDeleteRole(scope.row)" type="text" style="color: red" size="small" :disabled="btnList.delete">删除</el-button>
              <!-- <el-button class="global_edit" @click="editRole(scope.row)" type="text" size="small" :disabled="btnList.edit">编辑</el-button> -->
              <!-- <el-button class="global_delete" @click="sureDeleteRole(scope.row)" type="text" size="small" :disabled="btnList.delete">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin:10px 0 10px 0; float: right;" class="pagination" background :current-page.sync="currentPage" :hide-on-single-page="showPagination" :page-size="pagesize" layout="prev, pager, next" :total="roleInfoList.length"></el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import roleBtn from '../../public/means'
export default {
  data() {
    return {
      formInline: {
        role_name: "",
      },
      roleInfoList: [],
      menu_id: 10,
      roleBtnArr: [],
      currentPage:1,
      showPagination: true,  
      pagesize: 10,
      btnList: {
        add: false,
        edit: false,
        delete: false
      }
    }
  },
  async created () {
    this.keyupSubmit()
    // console.log(roleBtnList);
    const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
    this.getNoleInfo()
    if(role_id){
      // 获取按钮权限状态
      let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
      this.btnList = arr
    }
  },
  methods:{
    // 获取角色
    async getNoleInfo () {
      const { result } = await this.$http.get('/roleInfo')
      this.roleInfoList = result
    },
    editRole(row){
      // 路由跳转
      this.$router.push({
        path:'/addRole',
        query:{
          role_id: row.role_id,
          role_name: row.role_name,
          status: 'edit'
        }
      })

    },
    async sureDeleteRole(row){
      const tips = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', { // 确认删除
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(tips !== 'confirm'){
          return this.$message('已取消删除！')
        }
        // 确定删除掉用接口
      this.deleteRole(row)
    },
    async deleteRole(row){
      const data = await this.$http.delete('/roleInfo/deletebyId?role_id=' + row.role_id)
      if(data.code !== 200) {
        return this.$message('删除失败，请稍后重试！')
      }
      this.$message.success(data.message)
      const index = this.roleInfoList.indexOf(row) // 接口调用后手动删除数组中该元素
      this.roleInfoList.splice(index,1)
    },
    addRole(){
      this.$router.push({
        path: '/addRole',
        query: {
          status: 'add'
        }
      })
    },
    async searchRoleName() {
      // if(!this.formInline.role_name) return this.$message('请先输入角色名称！')
      if(!this.formInline.role_name) return this.getNoleInfo()
      // 模糊查询
      const { result } = await this.$http.post('/roleInfo/byName', {role_name: this.formInline.role_name})
      this.roleInfoList = result
    },
    keyupSubmit(){
        document.onkeydown=e=>{
          let _key=window.event.keyCode;
          if(_key===13){
            this.searchRoleName()
          }
        }
      },
  }
};
</script>

<style lang="scss" scoped>
@import "./RolePermissions.scss";
</style>